<template>
  <div v-if="visible" class="global-search global-search-wrapper">
    <div class="global-search-box">
      <Select
        size="large"
        showSearch
        placeholder="Input search text.."
        :style="{ width: '100%' }"
        :defaultActiveFirstOption="false"
        :showArrow="false"
        :filterOption="false"
        :onSearch="handleSearch"
        :onchange="handleChange"
        :notFoundContent="null"
      ></Select>
      <div class="global-search-tips">Open with Ctrl/⌘ + K</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "GlobalSearch",
  data() {
    return {
      visible: false,
    };
  },
  mounted() {
    document.addEventListener("keydown", this.keyboardHandle);
  },
  methods: {
    handleSearch(e) {
      this.$emit("search", e);
    },
    handleChange(e) {
      this.$emit("change", e);
    },
    keyboardHandle(e) {
      e.preventDefault();
      e.stopPropagation();
      const { ctrlKey, shiftKey, altKey, keyCode } = e;
      if (keyCode === 75 && ctrlKey && !shiftKey && !altKey) {
        this.visible = !this.visible;
      }
    },
  },
};
</script>

<style lang="less">
@import "~ant-design-vue/es/style/themes/default";

.global-search-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: @zindex-modal-mask;
  background: @modal-mask-bg;

  .global-search-box {
    position: absolute;
    top: 20%;
    left: 50%;
    width: 450px;
    transform: translate(-50%, -50%);

    .global-search-tips {
      color: @white;
      font-size: @font-size-lg;
      text-align: right;
    }
  }
}
</style>